<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>用户管理</title>
    <link rel="icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
    <meta name="author" content="yinqi">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/icons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/animate.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15" id="app">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar d-flex flex-column flex-md-row">
                    <div class="toolbar-btn-action">
                        <button class="btn btn-primary m-r-5"
                                data-toggle="modal"
                                data-target="#addModalChange"><i
                                class="mdi mdi-plus"></i> 新增
                        </button>

                        <button class="btn btn-danger" @click="deleteRows"><i
                                class="mdi mdi-window-close"></i> 删除
                        </button>
                    </div>

                    <%--添加图书 模态框--%>
                    <div class="modal fade" id="addModalChange" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalChangeLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <form class="was-validated" novalidate>
                                        <div class="mb-3">
                                            <label for="isbn">ISBN</label>
                                            <input v-model="addBook.isbn" type="text" class="form-control" id="isbn"
                                                   required>
                                            <div class="invalid-feedback">请输入ISBN</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="name">书名</label>
                                            <input v-model="addBook.name" type="text" class="form-control" id="name"
                                                   required>
                                            <div class="invalid-feedback">请输入书名</div>
                                        </div>
                                        <%--<div class="form-group mb-3">
                                            <label for="sex">性别</label>
                                            <select id="sex" class="custom-select" required>
                                                <option value="">选择性别</option>
                                                <option value="女">女</option>
                                                <option value="男">男</option>
                                            </select>
                                            <div class="invalid-feedback">请选择一项</div>
                                        </div>--%>
                                        <div class="mb-3">
                                            <label for="author">作者</label>
                                            <input v-model="addBook.author" type="text" class="form-control"
                                                   id="author" required>
                                            <div class="invalid-feedback">请输入作者</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="date">发布时间</label>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input v-model="addBook.pubDate" id="date" type="text"
                                                           class="form-control"
                                                           data-provide="datepicker"
                                                           data-today-highlight="true" data-autoclose="false" required/>
                                                    <div class="invalid-feedback">请选择日期</div>
                                                </div>
                                            </div>

                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" @click="addHandleBook" id="addUser">添加
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <%--修改图书--%>
                    <div class="modal fade" id="editModalChange" tabindex="-1" role="dialog"
                         aria-labelledby="exampleModalChangeLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <form class="was-validated" novalidate>
                                        <div class="mb-3">
                                            <label for="editisbn">ISBN</label>
                                            <input type="text" v-model="editBook.isbn" class="form-control"
                                                   id="editisbn" required>
                                            <div class="invalid-feedback">请输入ISBN</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editname">书名</label>
                                            <input type="text" v-model="editBook.name" class="form-control"
                                                   id="editname" required>
                                            <div class="invalid-feedback">请输入书名</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="editauthor">作者</label>
                                            <input type="text" v-model="editBook.author" class="form-control"
                                                   id="editauthor" required>
                                            <div class="invalid-feedback">请输入作者</div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="editdate">发布时间</label>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input id="editdate" v-model="editBook.pubDate" type="text"
                                                           class="form-control"
                                                           data-provide="datepicker"
                                                           data-today-highlight="true" data-autoclose="false" required/>
                                                    <div class="invalid-feedback">请选择日期</div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" @click="editHandleBook">修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <%--搜索框--%>
                    <form class="search-bar ml-md-auto" method="get" action="#!" role="form">
                        <input type="hidden" name="search_field" id="search-field" value="title"/>
                        <div class="input-group ml-md-auto">
                            <div class="input-group-prepend">
                            <input type="text" class="form-control" v-model="queryBook.ISBN" placeholder="请输入ISBN">
                            </div>
                            <button class="btn btn-success" @click="getQueryBookList" ><i
                                    class="mdi mdi-book-search"></i>
                                查询
                            </button>
                        </div>
                    </form>
                </div>
                <div class="card-body">

                    <%--表格--%>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox"
                                               v-model="selectedBook"
                                               @change="toggleAll">
                                    </div>
                                </th>
                                <th>编号</th>
                                <th>ISBN</th>
                                <th>书名</th>
                                <th>作者</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in rows" :key="index">
                                <td>
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" v-model="selectedBookIds" :value="item.id">
                                    </div>
                                </td>
                                <td>{{item.id}}</td>
                                <td>{{item.isbn}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.author}}</td>
                                <td>{{formatDate(new Date(item.pubDate))}}</td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-outline-dark"
                                                @click="getEditBook(item.id)"
                                                style="margin: 5px">编辑
                                        </button>
                                        <button class="btn btn-outline-danger"
                                                @click="deleteBook(item.id)"
                                                style="margin: 5px">删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <%--分页--%>
                    <nav>
                        <ul class="pagination">
                            <template v-for="i in pages">
                                <li v-if="i==pageIndex" class="page-item active">
                                    <a class="page-link" onclick="getBookList(this)">{{i}}</a>
                                </li>
                                <li v-else
                                    class="page-item"><a class="page-link" onclick="getBookList(this)">{{i}}</a></li>
                            </template>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/popper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/lyear-loading.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-notify.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/lightyear.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>


<script type="text/javascript">

    // 添加用户 模态框
    $('#addModalChange').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        modal.find('.modal-title').text('New message to ' + recipient);
        modal.find('.modal-body input').val(recipient);
    })

    var vm = new Vue({
        el: '#app',
        data: {
            total: 0,
            rows: '',
            pages: 0,
            pageIndex: 1,

            queryBook:{
                ISBN:""
            },

            addBook: {
                id: 0,
                isbn: "",
                name: "",
                author: "",
                pubDate: ""
            },

            editBook: {
                id: 0,
                isbn: "",
                name: "",
                author: "",
                pubDate: ""
            },

            // 批量删除数据
            selectedBook: false,
            selectedBookIds: [],

        },
        created() {
            this.getQueryBookList()
        },
        methods: {

            getQueryBookList() {
                let ISBN=this.queryBook.ISBN
                // console.log("===",ISBN)
                // 请求加载
                $.post('${pageContext.request.contextPath}/admin/book/search', {
                    ISBN:this.queryBook.ISBN,
                    pageIndex: this.pageIndex,
                    pageSize: 8
                }, resp=>{
                    // console.log(response)
                    this.pages = resp.data.pages;
                    this.total = resp.data.total;
                    this.rows = resp.data.rows;
                })
            },

            deleteBook(id) {
                $.post("${pageContext.request.contextPath}/admin/book/del/" + id, {
                    id: id
                })

                setTimeout(() => {
                    // 请求加载
                    this.getQueryBookList("")
                    lightyear.notify("操作成功", 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }, 500)

            },

            addHandleBook() {
                var isbn = $('#isbn').val()
                var name = $('#name').val()
                var author = $('#author').val()
                var date = $('#date').val()
                console.log(date)

                $.post('${pageContext.request.contextPath}/admin/book/addBook', {
                    ISBN: isbn,
                    name: name,
                    author: author,
                    pubDate: date
                }, response => {
                    if (response.code===200){
                        setTimeout(() => {
                            // 请求加载
                            this.getQueryBookList()
                            // 清空添加表单
                            this.addBook = {
                                id: 0,
                                isbn: "",
                                name: "",
                                author: "",
                                pubDate: ""
                            }
                            $('#addModalChange').modal('hide')
                            lightyear.notify("添加成功", 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                        }, 500)
                    }else {
                        lightyear.notify(response.msg, 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    }
                })



            },

            getEditBook(id) {
                $.get('${pageContext.request.contextPath}/admin/book/' + id,
                    resp => {
                        // console.log(resp)
                        resp.data.data.pubDate = this.formatDate(new Date(resp.data.data.pubDate))
                        this.editBook = resp.data.data
                    })
                $('#editModalChange').modal('show')
            },

            editHandleBook() {
                $.post('${pageContext.request.contextPath}/admin/book/updateBook',
                    {
                        id: this.editBook.id,
                        ISBN: this.editBook.isbn,
                        name: this.editBook.name,
                        author: this.editBook.author,
                        pubDate: this.editBook.pubDate,
                    },
                    resp => {
                        console.log(resp)
                    }
                )
                // console.log(this.editUser);
                setTimeout(() => {
                    // 请求加载
                    this.getQueryBookList()
                    $('#editModalChange').modal('hide')
                    lightyear.notify("操作成功", 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }, 500)

            },

            toggleAll() {
                this.selectedBookIds = this.selectedBook ? this.rows.map(item => item.id) : [];
                // console.log(this.selectedRows)
            },
            deleteRows() {
                console.log(this.selectedBookIds)

                $.ajax({
                    url: "${pageContext.request.contextPath}/admin/book/delete",
                    data: JSON.stringify(this.selectedBookIds),
                    type: "POST",
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8',//这个必须是这个格式
                    success: resp => {
                        console.log(resp)
                    },
                    error: error => {
                        console.log(error)
                    }
                })

                setTimeout(()=>{
                    this.getQueryBookList()
                    this.selectedBook=false
                    lightyear.notify("操作成功", 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                },500)
            },

            formatDate(date) {
                var year = date.getFullYear();

                var month = (1 + date.getMonth()).toString();
                month = month.length > 1 ? month : '0' + month;

                var day = date.getDate().toString();
                day = day.length > 1 ? day : '0' + day;

                return year + '-' + month + '-' + day;
            }
        }
    })



    // 分页函数
    function getBookList(li) {
        var pageIndex = li.innerText
        // console.log("pageIndex：", pageIndex)
        vm.pageIndex = pageIndex

        // 请求加载
        $.post('${pageContext.request.contextPath}/admin/book/search', {
            ISBN:vm.queryBook.ISBN,
            pageIndex: vm.pageIndex,
            pageSize: 8
        }, function (response) {
            console.log(response)
            vm.pages = response.data.pages;
            // vm.pageIndex=response.data.pageIndex;
            vm.total = response.data.total;
            vm.rows = response.data.rows;
        })
    }


</script>

</body>
</html>